import React from "react";
import styled from "@emotion/styled";
import { FiCheck, FiMinus } from "react-icons/fi";

interface CheckboxOption {
  label: string;
  value: string | number;
  disabled?: boolean;
}

interface CheckboxGroupProps {
  options: CheckboxOption[];
  value?: (string | number)[];
  onChange?: (value: (string | number)[]) => void;
  disabled?: boolean;
  direction?: "horizontal" | "vertical";
  className?: string;
}

interface CheckboxProps {
  label?: string;
  checked?: boolean;
  indeterminate?: boolean;
  disabled?: boolean;
  onChange?: (checked: boolean) => void;
  value?: string | number;
  className?: string;
}

export type { CheckboxOption, CheckboxGroupProps, CheckboxProps };

const CheckboxContainer = styled.label<{ disabled?: boolean }>`
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
  opacity: ${(props) => (props.disabled ? 0.5 : 1)};
  user-select: none;
  position: relative;
  padding: 0.25rem 0;
  min-height: 44px; /* 触摸目标最小尺寸 */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  @media (max-width: 768px) {
    min-height: 36px;
    gap: 0.625rem;
    padding: 0.125rem 0;
  }

  &:hover {
    .checkbox-box {
      border-color: ${(props) =>
        !props.disabled && "var(--accent-color, #3b82f6)"};
    }
  }
`;

const HiddenCheckbox = styled.input`
  position: absolute;
  opacity: 0;
  pointer-events: none;
`;

const CheckboxBox = styled.div<{
  checked?: boolean;
  indeterminate?: boolean;
  disabled?: boolean;
}>`
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 2px solid
    ${(props) =>
      props.checked || props.indeterminate
        ? "var(--accent-color, #3b82f6)"
        : "var(--border-color, #d1d5db)"};
  background: ${(props) =>
    props.checked || props.indeterminate
      ? "var(--accent-color, #3b82f6)"
      : "var(--bg-primary, #ffffff)"};
  position: relative;
  transition: border-color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 18px;
    height: 18px;
  }
  display: flex;
  align-items: center;
  justify-content: center;

  svg {
    color: #ffffff;
    opacity: ${(props) => (props.checked || props.indeterminate ? 1 : 0)};
    transform: scale(
      ${(props) => (props.checked || props.indeterminate ? 1 : 0.5)}
    );
    transition: all 0.2s ease;
  }
`;

const CheckboxLabel = styled.span`
  font-size: 0.9rem;
  color: var(--text-primary, #1f2937);
  line-height: 1.5;
`;

const CheckboxGroupContainer = styled.div<{
  direction?: "horizontal" | "vertical";
}>`
  display: flex;
  flex-direction: ${(props) =>
    props.direction === "vertical" ? "column" : "row"};
  gap: ${(props) => (props.direction === "vertical" ? "0.75rem" : "1.5rem")};
  flex-wrap: wrap;
`;

export const Checkbox: React.FC<CheckboxProps> = ({
  label,
  checked = false,
  indeterminate = false,
  disabled = false,
  onChange,
  value,
  className,
}) => {
  const handleChange = (e: React.MouseEvent) => {
    e.stopPropagation(); // 阻止事件冒泡
    if (!disabled && onChange) {
      onChange(!checked);
    }
  };

  return (
    <CheckboxContainer
      disabled={disabled}
      className={className}
      onClick={handleChange}
    >
      <HiddenCheckbox
        type="checkbox"
        checked={checked}
        disabled={disabled}
        value={value}
        readOnly
      />
      <CheckboxBox
        className="checkbox-box"
        checked={checked}
        indeterminate={indeterminate}
        disabled={disabled}
      >
        {indeterminate ? <FiMinus size={12} /> : <FiCheck size={12} />}
      </CheckboxBox>
      {label && <CheckboxLabel>{label}</CheckboxLabel>}
    </CheckboxContainer>
  );
};

export const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
  options,
  value = [],
  onChange,
  disabled = false,
  direction = "horizontal",
  className,
}) => {
  const handleChange = (optionValue: string | number, checked: boolean) => {
    if (!disabled && onChange) {
      const newValue = checked
        ? [...value, optionValue]
        : value.filter((v) => v !== optionValue);
      onChange(newValue);
    }
  };

  return (
    <CheckboxGroupContainer direction={direction} className={className}>
      {options.map((option) => (
        <Checkbox
          key={option.value}
          label={option.label}
          checked={value.includes(option.value)}
          disabled={disabled || option.disabled}
          onChange={(checked) => handleChange(option.value, checked)}
          value={option.value}
        />
      ))}
    </CheckboxGroupContainer>
  );
};

export default Checkbox;
